<template>
    <div class="container">
        <div class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.id)">
            <div class="left">
                <!-- <div>
                    <span>姓名：</span>
                    <span>{{ item.customerName }}</span>
                </div> -->
                <!-- <div>
                    <span>手机号：</span>
                    <span>{{ item.customerPhone }}</span>
                </div> -->
                <div>
                    <span>客户姓名：</span>
                    <span>{{ item.customerName }}</span>
                </div>
                <div>
                    <span>产品名称：</span>
                    <span>{{ item.productName }}</span>
                </div>
                <div>
                    <span>创建时间：</span>
                    <span>{{ item.updateTime }}</span>
                </div>
            </div>
            <div class="status" :style="!item.deliveryType ? 'background-color: #ff976a' : 'background-color: #07c160'">
                <span v-if="!item.deliveryType">待领取</span>
                <span v-else>已领取</span>
            </div>
        </div>
        <div class="load-more" v-if="!isEnd && !isEmpty">
            <van-button :loading="isLoading" loading-text="加载中..." type="default" @click="loadMore">加载更多...</van-button>
        </div>
        <div class="no-data" v-if="isEnd && !isEmpty">
            <van-button plain type="default">没有更多了...</van-button>
        </div>
        <div v-if="isEnd && isEmpty" class="no-content">当前内容为空~</div>
    </div>
</template>

<script>
    import { getCashingList } from "@/api/order";
    import { pagination, CUSTOMERTYPE } from "@/utils/enumConfig";
    import { Dialog, Popup, Toast } from "vant";
    export default {
        data() {
            return {
                CUSTOMERTYPE: CUSTOMERTYPE,
                pagination: this.$_.cloneDeep(pagination),
                list: [],
                isEnd: false,
                isEmpty: false,
                isLoading: false,
            };
        },
        created() {
            if (this.$checkRole() != 3) {
                this.$router.replace("/my");
            }
        },
        async mounted() {
            await this.getList(this.pagination);
        },
        methods: {
            async loadMore() {
                let { current } = this.pagination;
                await this.getList({
                    ...this.pagination,
                    current: current + 1,
                });
            },
            async getList(pagination) {
                this.isLoading = true;
                let { size } = pagination;
                let list = await getCashingList({ ...pagination });
                if (list) {
                    this.list = this.list.concat(list);
                    this.pagination = pagination;
                    this.isEnd = list.length < size ? true : false;
                    this.isEmpty = this.list.length === 0 ? true : false;
                }
                this.isLoading = false;
            },
            goDetail(id) {
                this.$router.push(`/order/detail/${id}`);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .item {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 20px;
        color: #333;
        font-size: 14px;
        border-bottom: 1px solid #f1f1f1;
        margin-top: 10px;
        .left {
            flex: 1;
            margin-right: 20px;
            & > div {
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        .status {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .load-more,
    .no-data {
        width: 100%;
        button {
            width: 100%;
            color: #666;
        }
    }
    .fixed {
        position: fixed;
        bottom: 0;
        width: 100%;
        button {
            width: 100%;
        }
    }
    .container {
        padding-bottom: 20%;
        box-sizing: border-box;
    }
    .no-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #888;
    }
</style>